<template>
	<view>
		<view class="tab_nav">
			<view class="navTitle" v-for="(item,index) in list1" :key="index" >
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==0">
			<view class="swiper">
				<u-swiper
			                 :list="lunbo_list"
			                 previousMargin="30"
			                 nextMargin="30"
			                 circular
			                 :autoplay="false"
			                 radius="5"
			                 bgColor="#ffffff"
			         ></u-swiper>
			</view>
			<view  class="list" style="margin-top:10px">
				<view class="bor" v-for="(item,index) in list_img" :key="index">
					<view class="bor-view"><image :src="item.img" class="bor-img"></image></view>
					<text class="bor-text">{{item.title}}</text>
					
				</view>
			</view>
			<view class="movie-list" v-for="(item1,index1) in movielist" :key="index1">
				<view class="movie_video"><image :src="item1.video"></image></view>
				<view class="center">
					<view class="actor_name"><text>{{item1.movie_name}}</text></view>
					<view class="comment_count" v-if="item1.comment_count!=null">淘票票评分<text>{{item1.comment_count}}</text></view>
					<view class="comment_count" v-if="item1.comment_count==null">暂无评分</view>
					<view class="director"><text>导演：{{item1.director}}</text></view>
					<view class="actor"><text></text>主演：{{item1.actor}}</view>
					<view class="think">
						<view class="status" v-if="item1.status==1">今日最热</view>
						<view class="hot" v-if="item1.hot==1">一周最热</view>
						<view class="best" v-if="item1.best==1">口碑最佳</view>
					</view>
				</view>
				<view class="buy">
					<button class="buy-button" @click="buy_ticket(item1.id)"><text>购票</text></button>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive==1">
			<view class="next" v-for="(item4,index4) in nextmovielist" :key="index4">
				<view class="movie_video"><image :src="item4.video"></image></view>
				<view class="next_center">
					<view class="all_name">
				    <view class="actor_name_next"><text>{{item4.movie_name}}</text></view>
					<view class="point" v-if="item4.movie_dian==1"><text>点映</text></view>
					</view>
					<view class="people_center">
						<view class="wantch_people"><text>{{item4.want_watch_count}}</text>人想看</view>
						<view class="fen">|</view>
						<view class="time"><text>{{item4.time}}</text>上映</view>
					</view>
					<view class="director"><text>导演：{{item4.dirocter}}</text></view>
					<view class="actor"><text></text>主演：{{item4.actor}}</view>
				</view>
				<view class="buy">
					<button class="before" @click="before_buy(item4.id)" v-if="item4.status==1"><text>预售</text></button>
					<button class="want_look"  @click="showMessage(item4.id)" v-if="item4.status==2"><text>想看</text></button>
					<button class="want_looked"  @click="deleteMessage(item4.id)" v-if="item4.status==3"><text>已想看</text></button>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yes:true,
				next:false,
				isActive: 0,
				movielist:[],
				nextmovielist:[],
				want_look:false,
				list1:[
					{   
						index:0,
						name: '正在热映',
					},
					{
						index:1,
						name: '即将上映',
					}
				],
				 lunbo_list: [
				    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				     ],
					 list_img:[
					 	{
						list_img_id:1,
						img:'../../static/img/dianyinglibao.png',
						title:'电影礼包',
						},
						{
						list_img_id:2,
						img:'../../static/img/lingquanzhongxin.png',
						title:'拼团领券',	
						},
						{
						list_img_id:3,
						img:'../../static/img/yingchengtehui.png',
						title:'影城特惠',	
						},
						{
						list_img_id:4,
						img:'../../static/img/koubeiqushi.png',
						title:'口碑趋势',	
						},
					 ],
			}
		},
		onLoad(){
			this.getmovielist();
			this.getnextmovielist();
		},
		methods: {
			showMessage(id){
				console.log(id)
				// var that=this
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/want_movie_insert.php',
					 method: 'GET',
					 data:{
						 id:id
					 },
					    success: (res)=>{				
						 // this.want_watch_movie=res.data;
						 console.log("成功")
							  },
					          fail: (err)=>{}
				});
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/check_status.php',
					 method: 'GET',
					 data:{
						 id:id
					 },
					    success: (res)=>{				
						 // this.want_watch_movie=res.data;
						 console.log("跟新成功")
							  },
					          fail: (err)=>{}
				});
				
				uni.showToast({
				    title: '已想看，上映前会通知你',
				    // duration: 2000
				});
				window.location.reload();
				
			},
			deleteMessage(id){
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/want_movie_delete.php',
					 method: 'GET',
					 data:{
						 id:id
					 },
					    success: (res)=>{				
						 console.log("取消成功")
							  },
					          fail: (err)=>{}
				});
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/reset_check_status.php',
					 method: 'GET',
					 data:{
						 id:id
					 },
					    success: (res)=>{				
						 console.log("取消成功")
							  },
					          fail: (err)=>{}
				});
				window.location.reload();
			},
			 checked(index) {
			 	this.isActive = index
			 },
			before_buy(id){
				if(uni.getStorageSync('phone')){
					uni.navigateTo({
					    	url:"nextBuyTicket?id="+id
					    })
					console.log(id)
				}else{
					uni.showToast({
						title:"请登陆后购票",
						icon:'none',
						duration:2000,
						mask:true
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'../me/login'
						})
					},2000)
				}
			},			
			buy_ticket(id){
				if(uni.getStorageSync('phone')){
					uni.navigateTo({
					    	url:"buyTicket?id="+id
					    })
					console.log(id)
				}else{
					uni.showToast({
						title:"请登陆后购票",
						icon:'none',
						duration:2000,
						mask:true
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'../me/login'
						})
					},2000)
				}
			},
			getmovielist(){
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/moive.php',
					 method: 'GET',
					          success: (res)=>{
								  console.log("111")
						
						 this.movielist=res.data;
						 console.log(this.movielist)
							  },
					          fail: (err)=>{}
				})
			},
			getnextmovielist(){
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/next_movie.php',
					 method: 'GET',
					          success: (res)=>{
								  console.log("111")
						
						 this.nextmovielist=res.data;
						 console.log(this.nextmovielist)
							  },
					          fail: (err)=>{}
				})
			},
			// showMessage(id){
				
			// }
		}
	}
</script>


<style lang="scss" scoped>
	.next{
		width:92%;
		height:100px;
		background-color: rgb(243, 244, 245);
		margin:0 auto;
		border-top: 10px #ffffff solid;
		border-radius: 10px;
	}
	.tab_nav{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.tab_nav  .navTitle {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi;
			color: #333;
		}
		.active {
			position: relative;
			color: #333;
		}
		.active::after {
			content: "";
			position: absolute;
			width: 80rpx;
			height: 6rpx;
			background-color:  rgb(255,67,97);
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}
		.fen{
			font-size: 10px;
			color:#cecece;
			float:left;
			display: block;
			margin-left:5px;
		}
.tab{
	width:50%;
	float:right;
}	
.swiper{
	width:96%;
	margin: 10px;
}
.list{
	width:94%;
	height:60px;
	border-radius: 5px;
	background-color: rgb(243, 244, 245);
	margin:0 auto;
}
.bor{
	width:25%;
	height:60px;
	float:left;
	display:block;
	text-align: center;
}
.bor-view{
	width:100%;
	height:40px;
	display:flex;
	justify-content: center;
}
.bor-img{
	width:40px;
	height:40px;
	margin-top: 5px;
}
.bor-text{
	font-size: 10px;
	
}
.movie-list{
	width:92%;
	height:100px;
	background-color: rgb(243, 244, 245);
	margin:0 auto;
	border-top: 10px #ffffff solid;
	border-radius: 10px;
}
.movie_video{
	width:20%;
	height:85%;
	margin-top:7.5px;
	margin-left:10px;
	float:left;
	display: block;
}
.movie_video image{
	width:100%;
	height:100%;
	border-radius: 10px;
}
.center{
	width:55%;
	height:100%;
	float:left;
	display: block;
}
.next_center{
	width:55%;
	height:100%;
	float:left;
	display: block;
}

.wantch_people{
	margin-left:6px;
	font-size:10px;
	float:left;
	display: block;
	color: rgb(121, 121, 121);
}
.wantch_people text{
	color:rgb(252,172,20);
	font-size: 12px;
}
.time{
	font-size:10px;
	float:left;
	display: block;
	color: rgb(121, 121, 121);
	margin-left:5px;
}
.actor_name{
	width:100%;
	margin-top:6px;
	margin-left:10px;
}
.actor_name_next{
	// width:100%;
	margin-top:6px;
	margin-left:10px;
    float:left;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.all_name{
width:100%;
height:30px;
}
.people_center{
	width:100%;
	height:15px;
}
.point{
	margin-left:5px;
	width:30px;
	background-color: rgb(252,172,20);
	color:white;
	text-align: center;
	border-radius: 5px;
	font-size: 11px;
	float:left;
	display: block;
	margin-top:8px;
}

.comment_count{
	width:100%;
	font-size:10px;
	color: rgb(121, 121, 121);
	margin-left:10px;
	margin-top:2px;
}
.comment_count text{
	margin-left:3px;
	color:rgb(223, 154, 107)
}
.director{
	width:100%;
	font-size:10px;
	color: rgb(121, 121, 121);
	margin-left:10px;
	margin-top:2px;
}
.actor{
	width:100%;
	font-size:10px;
	color: rgb(121, 121, 121);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left:10px;
	margin-top:0px;
}
.think{
	width:100%;
    margin-left:10px;
}
.status{
	border:1px rgb(255,67,97) solid;
	font-size: 8px;
	color:rgb(255,67,97);
	border-radius: 3px;
	width:50px;
	float:left;
	display: block;
}
.hot{
	border:1px rgb(255,144,28) solid;
	font-size: 8px;
	color:rgb(255,144,28);
	border-radius: 3px;
	width:50px;
	float:left;
	display: block;
	margin-left:2px;
}
.best{
	border:1px rgb(49,169,245) solid;
	font-size:8px;
	color:rgb(49,169,245);
	border-radius: 3px;
	float:left;
	display: block;
	width:50px;
	margin-left:2px;
}
.buy{
	margin-top: 3%;
	width:20%;
	height:80%;
	float:right;
	display: flex;
	justify-content: center;
	align-items: center;
}
.buy-button{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:white;
	background-color: rgb(251,86,130);
	border-radius: 14px;
}
.before{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:white;
	background:linear-gradient(to right,rgb(40,198,251),rgb(53,179,249));
	border-radius: 14px;
}
.want_look{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:white;
	background:linear-gradient(to right,rgb(252,172,20),rgb(254,176,82));
	border-radius: 14px;
}
.want_looked{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:rgb(95,102,114);
	background:white;
	border-radius: 14px;
	border:1px #cecece solid;
	diaplay:none;
}
</style>

